<script setup lang="ts">
import { ref } from 'vue';
//@ts-ignore
import Header from '../components/Header.vue';
//@ts-ignore
import Footer from '../components/Footer.vue';

// 攻略数据
const guides = ref([
  {
    id: 1,
    title: '巴黎三日游完全指南',
    author: '旅行达人',
    date: '2024-05-15',
    views: 3542,
    likes: 286,
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.7fe710ee043a53ced44e016a218f0fa0?rik=2EMf1ZmT5kYJbw&riu=http%3a%2f%2fb4-q.mafengwo.net%2fs11%2fM00%2f42%2fAB%2fwKgBEFq5yQmAP0gbAApwg1V7rr094.jpeg&ehk=%2br9AmVDQBt3LQIncDyMRgRK0CBvaYef735Xt%2b3KqaPY%3d&risl=&pid=ImgRaw&r=0',
    summary: '探索浪漫之都的艺术、美食与文化，三天时间玩转巴黎的必去景点和隐藏宝藏。',
    tags: ['欧洲', '城市游', '艺术', '美食']
  },
  {
    id: 2,
    title: '日本樱花季旅行攻略',
    author: '摄影师小王',
    date: '2024-04-20',
    views: 5621,
    likes: 412,
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.tM_3RuFbFyEXrR2LAg_PsAHaEd?rs=1&pid=ImgDetMain',
    summary: '一年一度的樱花季，带你领略日本最美的春天。从东京到京都，精选赏樱胜地和拍摄技巧。',
    tags: ['亚洲', '赏花', '摄影', '春季']
  },
  {
    id: 3,
    title: '马尔代夫度假全攻略',
    author: '海岛控',
    date: '2024-03-10',
    views: 4328,
    likes: 356,
    image: 'https://pic1.zhimg.com/v2-3128a1d1a90652fe5fb8ac0160aed12f_r.jpg',
    summary: '从选岛到水上活动，马尔代夫蜜月度假的完美指南。教你如何选择最适合的岛屿和水屋。',
    tags: ['海岛', '蜜月', '奢华', '潜水']
  },
  {
    id: 4,
    title: '纽约自由行省钱攻略',
    author: '背包客小李',
    date: '2024-02-25',
    views: 6712,
    likes: 489,
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.uoRJflYO5sVf5n8TpjKZPwHaDd?rs=1&pid=ImgDetMain',
    summary: '如何在纽约这座不夜城玩得尽兴又省钱？地铁通票、博物馆联票和免费景点全攻略。',
    tags: ['北美', '城市游', '省钱', '自由行']
  },
  {
    id: 5,
    title: '泰国清迈文化体验之旅',
    author: '文化探索者',
    date: '2024-01-18',
    views: 3865,
    likes: 275,
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.831b0de582bf701411627137350c0d76?rik=1jrTJEZaQxqt7g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20191229ac%2f131%2fw2000h1331%2f20191229%2ff007-imkzenp2985195.jpg&ehk=3%2f6mlfBG2FiOT%2blWPK2Cl1U%2bk88nuahbpqUMIkO54YM%3d&risl=&pid=ImgRaw&r=0',
    summary: '深入清迈古城，体验泰北文化的独特魅力。寺庙巡礼、传统工艺和地道美食不容错过。',
    tags: ['亚洲', '文化', '美食', '寺庙']
  },
  {
    id: 6,
    title: '意大利托斯卡纳自驾游',
    author: '美食家大卫',
    date: '2023-12-05',
    views: 4127,
    likes: 342,
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.VVZMY8dTbRjoxBsGX9bebQHaFY?rs=1&pid=ImgDetMain',
    summary: '穿越托斯卡纳的葡萄园和橄榄树，探访中世纪小镇，品尝地道美食和顶级葡萄酒。',
    tags: ['欧洲', '自驾', '美食', '葡萄酒']
  },
  {
    id: 7,
    title: '澳大利亚大堡礁潜水指南',
    author: '潜水教练Tom',
    date: '2023-11-20',
    views: 5236,
    likes: 398,
    image: 'https://pic1.zhimg.com/v2-f82e5ec1032ae7ad6a98b8b303ebfa14_720w.jpg?source=172ae18b',
    summary: '世界最大的珊瑚礁系统，潜水爱好者的天堂。从初学者到专业潜水员，大堡礁潜点全介绍。',
    tags: ['大洋洲', '潜水', '自然', '海洋']
  },
  {
    id: 8,
    title: '冰岛极光摄影攻略',
    author: '极光猎人',
    date: '2023-10-15',
    views: 4852,
    likes: 367,
    image: 'https://pic1.zhimg.com/v2-fdafb39a76c67a4e4be0d50275eb4e00_r.jpg',
    summary: '如何在冰岛捕捉最美极光？从最佳观测地点到专业摄影技巧，一篇攻略全搞定。',
    tags: ['欧洲', '极光', '摄影', '冬季']
  }
]);

// 分类选项
const categories = ref([
  { id: 1, name: '目的地攻略' },
  { id: 2, name: '美食指南' },
  { id: 3, name: '摄影技巧' },
  { id: 4, name: '省钱技巧' },
  { id: 5, name: '自驾游' }
]);

const regions = ref([
  { id: 1, name: '亚洲' },
  { id: 2, name: '欧洲' },
  { id: 3, name: '北美' },
  { id: 4, name: '南美' },
  { id: 5, name: '大洋洲' },
  { id: 6, name: '非洲' }
]);

// 搜索关键词
const searchKeyword = ref('');

// 筛选方法
const filteredGuides = () => {
  if (!searchKeyword.value) return guides.value;
  
  const keyword = searchKeyword.value.toLowerCase();
  return guides.value.filter(guide => 
    guide.title.toLowerCase().includes(keyword) || 
    guide.summary.toLowerCase().includes(keyword) ||
    guide.tags.some(tag => tag.toLowerCase().includes(keyword))
  );
};

// 热门标签
const popularTags = ref([
  '美食', '摄影', '自驾', '省钱', '海岛', '城市游', '文化', '自然', '潜水', '徒步'
]);

// 当前页码
const currentPage = ref(1);
</script>

<template>
  <div class="guide-page">
    <Header />
    
    <div class="guide-banner">
      <div class="banner-content">
        <h1>旅行攻略</h1>
        <p>探索专业旅行者的独家攻略，让您的旅行更加精彩</p>
      </div>
    </div>
    
    <div class="container">
      <div class="search-filter-section">
        <div class="search-bar">
          <input 
            type="text" 
            v-model="searchKeyword" 
            placeholder="搜索攻略..." 
          />
          <button class="search-button">搜索</button>
        </div>
        
        <div class="popular-tags">
          <span class="tag-label">热门标签:</span>
          <div class="tags">
            <span v-for="(tag, index) in popularTags" :key="index" class="tag">
              {{ tag }}
            </span>
          </div>
        </div>
      </div>
      
      <div class="guide-content">
        <div class="sidebar">
          <div class="filter-section">
            <h3>攻略分类</h3>
            <div class="filter-list">
              <label v-for="category in categories" :key="category.id" class="filter-item">
                <input type="checkbox" :value="category.id" />
                <span>{{ category.name }}</span>
              </label>
            </div>
          </div>
          
          <div class="filter-section">
            <h3>目的地区域</h3>
            <div class="filter-list">
              <label v-for="region in regions" :key="region.id" class="filter-item">
                <input type="checkbox" :value="region.id" />
                <span>{{ region.name }}</span>
              </label>
            </div>
          </div>
          
          <div class="featured-guide">
            <h3>编辑推荐</h3>
            <div class="featured-guide-card">
              <img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="编辑推荐" />
              <h4>2024年最值得去的10个小众目的地</h4>
              <p>远离人群，探索这些鲜为人知的旅行胜地</p>
              <button class="read-more-btn">阅读全文</button>
            </div>
          </div>
        </div>
        
        <div class="guides-list">
          <div v-for="guide in filteredGuides()" :key="guide.id" class="guide-card">
            <div class="guide-image">
              <img :src="guide.image" :alt="guide.title" />
            </div>
            <div class="guide-info">
              <h3 class="guide-title">{{ guide.title }}</h3>
              <div class="guide-meta">
                <span class="guide-author">{{ guide.author }}</span>
                <span class="guide-date">{{ guide.date }}</span>
                <div class="guide-stats">
                  <span class="views"><i class="icon">👁️</i> {{ guide.views }}</span>
                  <span class="likes"><i class="icon">❤️</i> {{ guide.likes }}</span>
                </div>
              </div>
              <p class="guide-summary">{{ guide.summary }}</p>
              <div class="guide-tags">
                <span v-for="(tag, index) in guide.tags" :key="index" class="guide-tag">
                  {{ tag }}
                </span>
              </div>
              <button class="read-more-btn">阅读全文</button>
            </div>
          </div>
          
          <div class="pagination">
            <button class="page-btn" :class="{ active: currentPage === 1 }">1</button>
            <button class="page-btn" :class="{ active: currentPage === 2 }">2</button>
            <button class="page-btn" :class="{ active: currentPage === 3 }">3</button>
            <button class="page-btn next">下一页 &raquo;</button>
          </div>
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<style scoped>
.guide-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.guide-banner {
  height: 300px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.banner-content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.banner-content p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 15px;
}

.search-filter-section {
  margin-bottom: 30px;
}

.search-bar {
  display: flex;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
}

.search-button {
  padding: 0 20px;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
}

.popular-tags {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
}

.tag-label {
  font-weight: 500;
  margin-right: 15px;
  white-space: nowrap;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag {
  padding: 5px 12px;
  background-color: white;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.tag:hover {
  background-color: #e6f2ff;
}

.guide-content {
  display: flex;
  gap: 30px;
}

.sidebar {
  width: 300px;
  flex-shrink: 0;
}

.filter-section {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.filter-section h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.featured-guide {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.featured-guide h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.featured-guide-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}

.featured-guide-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #333;
}

.featured-guide-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.guides-list {
  flex: 1;
}

.guide-card {
  display: flex;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.guide-image {
  width: 300px;
  flex-shrink: 0;
}

.guide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guide-info {
  padding: 20px;
  flex: 1;
}

.guide-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.guide-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #777;
}

.guide-author {
  font-weight: 500;
  margin-right: 15px;
}

.guide-date {
  margin-right: 15px;
}

.guide-stats {
  display: flex;
  gap: 15px;
  margin-left: auto;
}

.views, .likes {
  display: flex;
  align-items: center;
  gap: 5px;
}

.guide-summary {
  margin-bottom: 15px;
  color: #555;
  line-height: 1.5;
}

.guide-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.guide-tag {
  padding: 3px 10px;
  background-color: #f0f8ff;
  color: #0066cc;
  border-radius: 15px;
  font-size: 12px;
}

.read-more-btn {
  padding: 8px 15px;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 14px;
}

.read-more-btn:hover {
  background-color: #0055aa;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 30px;
}

.page-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn.active {
  background-color: #0066cc;
  color: white;
  border-color: #0066cc;
}

.page-btn:hover:not(.active) {
  background-color: #f5f5f5;
}

.page-btn.next {
  width: auto;
  padding: 0 15px;
}

@media (max-width: 992px) {
  .guide-content {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
  }
  
  .guide-card {
    flex-direction: column;
  }
  
  .guide-image {
    width: 100%;
    height: 200px;
  }
}
</style> 